<template>
	<view class="container">
		<tui-tabs :tabs="tabs" :isFixed="true" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19"
		 @change="change" itemWidth="20%" width="100%"></tui-tabs>
		<view v-if="show">
		<view class="page-box" v-show="currentTab==0">
			<orderList ref="whole" orderIndex="-1"></orderList>
		</view>
		<view  class="page-box" v-show="currentTab==1" >
			<orderList ref="payment" orderIndex="0"></orderList>
		</view>
		<view  class="page-box" v-show="currentTab==2">
			<orderList ref="toBeDelivered" orderIndex="1"></orderList>
		</view>
		<view  class="page-box" v-show="currentTab==3">
			<orderList ref="delivered" orderIndex="2"></orderList>
		</view>
		<view  class="page-box" v-show="currentTab==4">
			<orderList ref="completed" orderIndex="3"></orderList>
		</view>
		</view>
		
	</view>
</template>

<script>
	import orderList from '../../components/orderList.vue'

	export default {
		components:{
			orderList,
			
		},
		data() {
			return {
				tabs: [{
					name: "全部"
				}, {
					name: "待付款"
				}, {
					name: "待发货"
				}, {
					name: "待收货"
				}, {
					name: "已完成"
				}],
				currentTab: 0,
				pageIndex: 1,
				show:true,
			}
		},
		onLoad(o) {
			this.currentTab=o.currentTab;
		},
		methods: {
			change(e) {
				this.currentTab = e.index
			},
			detail() {
				uni.navigateTo({
					url: '../orderDetail/orderDetail'
				})
			},
			refresh(){
				this.show=false;
				setTimeout(()=>{this.show=true;},100)
			}
		},
		onReachBottom: function() {
			if(this.currentTab==0){
				this.$refs.whole.rendering()
			}else if(this.currentTab==1){
				this.$refs.payment.rendering()
			}else if(this.currentTab==2){
				this.$refs.toBeDelivered.rendering()
			}else if(this.currentTab==3){
				this.$refs.delivered.rendering()
			}else if(this.currentTab==4){
				this.$refs.completed.rendering()
			}
		}	
	}
</script>

<style scoped>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
		padding-top: 90rpx;
		height: 100%;
	}
	.page-box{
		
	}
	
</style>
